<template>
  <el-dialog title="租赁合同查看" custom-class="contractPreview" :visible.sync="viewDialogVisible" width="85%" :before-close="close" :close-on-click-modal="false">
    <el-tabs v-model="activeName">
      <el-tab-pane label="合同信息" name="first">
        <!-- 合同信息 -->
        <contractInformation ref="contractInformation"></contractInformation>
      </el-tab-pane>
      <el-tab-pane label="收费明细" name="second">
        <contractDetails ref="contractDetails" />
      </el-tab-pane>
      <el-tab-pane label="变更记录" name="third">
        <contractChange ref="contractChange" />
      </el-tab-pane>
      <el-tab-pane label="续签记录" name="fourth">
        <contractRenew ref="contractRenew" />
      </el-tab-pane>
      <el-tab-pane label="退租记录" name="back">
        <contractBack ref="contractBack" />
      </el-tab-pane>
      <el-tab-pane label="审核记录" name="approve">
        <template v-if="recordingLlist.length">
          <approval-record style="margin-top: 20px;" v-for="(item, index) in recordingLlist" :key="index" v-bind="item" />
        </template>
        <template v-else>
          <Empty />
        </template>
      </el-tab-pane>
      <el-tab-pane label="附件" name="attatch">
        <v-upload type="file" v-if="activeName == 'attatch'" ref="rentContractFileUpload" :busId="formData.rentContractId" autoLoadFiles modelType="rent-contract" :isShowFileList="true" :isView="true" a />
      </el-tab-pane>
    </el-tabs>
    <div slot="footer">
      <el-button @click="close">关闭</el-button>
    </div>
    <!-- 物业查看 -->
    <propertyPreview ref="propertyPreview" append-to-body />
  </el-dialog>
</template>
<script src="./view.js"></script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 16px;
}
</style>
<style lang="scss">
@include formWrap(3);
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>

<style lang="scss">
.contractPreview {
  .el-tabs__header {
    margin-bottom: 16px;
  }
  .el-dialog__body {
    padding: 16px 32px;
  }
}
</style>
